<template>
  <div style="display: flex;">
      <el-input
        v-model="v"
        clearable
        :disabled="disabled"
        :type="type"
        @change="onChange"
        style="width: 300px"
      />
      <listen style="width: 100px" v-of="!disabled" @change="onListenChange" />

  </div>
</template>

<script>
import Listen from "./Listen.vue";

export default {
  name: 'listen-input',
  components: { Listen },
  data() {
    return {
      v: "",
    };
  },
  props: {
    value: String,
    type: String,
    disabled: Boolean,
  },
  model: {
    prop: "value",
    event: "change",
  },
  methods: {
    onChange(v) {
      this.$emit("change", v);
      this.$emit("input", v);
      this.$emit("update:value", v);
      this.v = v;
      this.value = v
    },
    onListenChange(v) {
      this.v = this.v + v;
      this.$emit("change", this.v);
      this.$emit("update:value", this.v);
      this.value = this.v
    },
  },
  mounted() {
    if (this.value) {
      this.v = this.value;
    }
  },
};
</script>

<style>
</style>